<template>
  <div class="page order-page">
    <van-nav-bar title="团购订单" left-text="返回" left-arrow @click-left="onClickLeft" />
    <van-tabs v-model="active" @change="changeStatus">
      <van-tab title="全部"></van-tab>
      <van-tab title="待付款"></van-tab>
      <van-tab title="拼团中"></van-tab>
      <van-tab title="待发货"></van-tab>
      <van-tab title="待收货"></van-tab>
    </van-tabs>
    <van-list
      v-model="loading"
      :error="error"
      :finished="finished"
      finished-text="没有更多了"
      @load="loadNext"
    >
      <van-panel
        v-for="order in orders"
        :key="order.order_id"
        :title="order.order_no"
        :status="orderStatus(order.status,order.win_status)"
        @click="viewOrder(order.order_id)"
      >
        <div>
          <van-card
            v-for="item in order.goods"
            :key="item.goods_id"
            :num="1"
            :price="item.goods_price"
            desc
            :title="item.goods_title"
            :thumb="item.goods_image"
          />
        </div>
        <div slot="footer" class="footer-action" @click.stop="empty">
          <template v-if="order.status == 0">
            <van-button size="small" @click="cancelOrder(order.order_id)">取消</van-button>
            <van-button size="small" type="danger" @click="payOrder(order.order_id)">支付</van-button>
          </template>
          <template v-else-if="order.status > 0">
            <template v-if="order.win_status == 0">
              <van-button
                size="small"
                type="danger"
                plain
                :to="'/group/order/'+(order.parent_order_id>0?order.parent_order_id:order.order_id)"
              >分享</van-button>
            </template>
            <template v-if="order.win_status == 1">
              <template v-if="order.status > 1">
                <van-button size="small" plain @click="expressOrder(order.order_id)">查看物流</van-button>
              </template>
              <template v-if="order.status > 2">
                <van-button
                  size="small"
                  type="info"
                  plain
                  @click="completeOrder(order.order_id)"
                >确认收货</van-button>
              </template>
            </template>
          </template>
          <template v-else>
            <van-button size="small" @click="deleteOrder(order.order_id)">删除</van-button>
          </template>
        </div>
      </van-panel>
    </van-list>

    <van-action-sheet
      v-model="showPay"
      :actions="actions"
      cancel-text="取消"
      @select="onSelectPay"
      @cancel="showPay = false"
    />
    <van-popup v-model="showKeyboard" closeable position="bottom" :style="{ height: '80%' }">
      <div style="margin-top:50px;">
        <van-password-input
          v-model="secpassword"
          info="请输入安全密码"
          :focused="showKeyboard"
          @focus="showKeyboard = true"
        />
        <van-number-keyboard
          :show="showKeyboard"
          @input="onInput"
          @delete="onDelete"
          @blur="showKeyboard = false"
        />
      </div>
    </van-popup>
  </div>
</template>
<script >
import utils from "../../utils";

export default {
  data() {
    return {
      active: 0,
      error: false,
      loading: true,
      finished: false,
      showPay: false,
      actions: [{ name: "微信支付",type:'wechat' }, { name: "佣金支付",type:'reward' }],
      page: 1,
      orders: [],

      secpassword: "",
      showKeyboard: false
    };
  },
  computed: {
    member() {
      return this.$store.state.userinfo
    }
  },
  mounted() {
    let status = this.$route.query.status;
    if (status && !isNaN(status)) {
      this.active = status * 1 + 1;
    }
    this.loadOrder();
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    empty() {},
    loadOrder() {
      let win_status = "";
      let status = "";
      if (this.active === 2) {
        status = 1;
        win_status = 0;
      } else if (this.active > 2) {
        status = this.active - 2;
      } else if (this.active > 0) {
        status = this.active - 1;
      }

      this.loading = true;
      this.error = false;
      this.$api
        .post("member.groupbuy/index", {
          status: status,
          gstatus: win_status,
          page: this.page
        })
        .then(json => {
          this.loading = false;
          if (json.code == 1) {
            if (json.data.lists) {
              this.orders = this.orders.concat(
                json.data.lists.map(item => {
                  item.goods = utils.fixListImage(item.goods, "goods_image");
                  return item;
                })
              );
            }
            if (
              !json.data.lists ||
              json.data.lists.length <= 0 ||
              json.data.page >= json.data.total_page
            ) {
              this.finished = true;
            }
          } else {
            this.error = true;
          }
        })
        .catch(err => {
          console.log(err);
          this.loading = false;
          this.error = true;
        });
    },
    loadNext() {
      if (!this.error) {
        this.page++;
      }
      this.loadOrder();
    },
    viewOrder(order_id) {
      this.$router.push("/member/groupbuy_order/detail?id=" + order_id);
    },
    changeStatus() {
      this.finished = false;
      this.orders = [];
      this.page = 1;
      this.loadOrder();
    },
    orderStatus(status, gstatus) {
      if (status == 0) {
        return "待付款";
      } else if (status >= 1) {
        if (gstatus == 0) {
          return "拼团中";
        } else if (gstatus == 2) {
          return "待开奖";
        } else if (gstatus < 0) {
          return "已解散";
        } else if (gstatus == 1) {
          switch (status) {
            case 1:
              return "已付款";
            case 2:
              return "待收货";
            case 3:
              return "待评价";
            case 4:
              return "已完成";
            default:
              return "已失效";
          }
        }
      } else if (status < -2) {
        return "退款中";
      } else {
        return "已失效";
      }
    },
    cancelOrder(order_id) {
      this.$dialog
        .confirm({
          title: "取消订单",
          message: "确定取消此订单?"
        })
        .then(() => {
          this.$api
            .post("member.groupbuy/cancel", { id: order_id })
            .then(json => {
              if (json.code == 1) {
                this.$toast.success(json.msg || "操作成功");
                this.changeStatus();
              }
            })
            .catch(err => {
              this.$toast.fail(err.msg || "操作失败");
            });
        });
    },
    deleteOrder(order_id) {
      this.$dialog
        .confirm({
          title: "删除订单",
          message: "确定删除此订单?"
        })
        .then(() => {
          this.$api
            .post("member.groupbuy/delete", { id: order_id })
            .then(json => {
              if (json.code == 1) {
                this.$toast.success(json.msg || "操作成功");
                this.changeStatus();
              }
            })
            .catch(err => {
              this.$toast.fail(err.msg || "操作失败");
            });
        });
    },
    onSelectPay(item) {
      this.showPay = false;
      if (item.type == "wechat") {
        this.$api
          .wxPay(this.currentOrderId, "GB")
          .then(() => {
            this.changeStatus();
          })
          .catch(() => {});
      } else if (item.type == "reward") {
        if(!this.member.has_secpassword){
          this.$dialog.confirm({
            message:'您还未设置安全密码\n是否现在设置'
          }).then(()=>{
            this.$router.push('/member/sec_password')
          }).catch(()=>{

          })
          return;
        }
        this.showKeyboard = true;
      }
    },
    onInput(key) {
      this.secpassword = (this.secpassword + key).slice(0, 6);
      if (this.secpassword.length >= 6) {
        this.balancePay();
      }
    },
    onDelete() {
      this.secpassword = this.secpassword.slice(0, this.secpassword.length - 1);
    },
    balancePay() {
      this.showKeyboard = false;
      this.$toast.loading()
      this.$api
        .post("order/balancepay", {
          order_id: "GB_" + this.currentOrderId,
          type: "reward",
          secpassword: this.secpassword
        })
        .then(res => {
          this.$toast.success(res.msg || "支付成功");
          this.changeStatus();
        })
        .catch(err => {
          this.$toast.fail(err.msg || "支付失败");
        });
    },
    payOrder(order_id) {
      this.currentOrderId = order_id;
      this.showPay = true;
    },
    expressOrder(order_id) {
      console.log(order_id);
      this.$toast("功能开发中~");
    },
    completeOrder(order_id) {
      this.$dialog
        .confirm({
          title: "完成订单",
          message: "确定已收货并完成订单?"
        })
        .then(() => {
          this.$api
            .post("member.groupbuy/confirm", { id: order_id })
            .then(json => {
              if (json.code == 1) {
                this.$toast.success(json.msg || "操作成功");
                this.changeStatus();
              }
            })
            .catch(err => {
              this.$toast.fail(err.msg || "操作失败");
            });
        });
    }
  }
};
</script>
<style lang="scss">
.order-page {
  .van-panel {
    margin-top: 20px;
  }
}
</style>